<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    //     鼠标事件
    const div = document.querySelector('div')

    // 鼠标事件是用户与网页交互时最常见的事件类型之一。这些事件包括：
    // click：当用户单击主鼠标按钮或按下回车键时触发。
    // div.addEventListener('click',function(){
    //   console.log('单击了');

    // })
    // dblclick：当用户双击主鼠标按钮时触发。
    // div.addEventListener('dblclick',function(){
    //   console.log('双击了');

    // })
    // mousedown：当用户按下鼠标任意按钮时触发。

    // mouseup：当用户释放鼠标任意按钮时触发。

    // mousemove：当鼠标在元素上移动时触发。


    // mouse over：当鼠标进入元素时触发。

    // mouse out：当鼠标离开元素时触发。

    // mouseenter：当鼠标进入元素时触发，不冒泡。
    // mouseleave：当鼠标离开元素时触发，不冒泡。





    // 鼠标经过
    div.addEventListener('mouseenter', function () {
      console.log(`oi! 我来了`)
    })
    // 鼠标离开
    div.addEventListener('mouseleave', function () {
      console.log(`oi! 我走了`)
    })




  </script>
</body>

</html>